<template>
    <div>
        <div class="tabbar_wrap">
            <div :class="['tabbar_one', index == acIndex ? 'active' : '']" v-for="(item, index) in navList"
                :key="item.name" @click="changeTab(item, index)">
                <img :src="index === acIndex ? item.selIcon : item.icon" alt="">
                <div>{{ item.name }}</div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: '2209vueTabbar',
    data() {
        return {
            acIndex: 0,
            navList: [{
                path: '/',
                icon: require('../assets/img/sy_off.png'),
                selIcon: require('../assets/img/sy_on.png'),
                name: '首页'
            },
            {
                path: '/about',
                icon: require('../assets/img/fl_off.png'),
                selIcon: require('../assets/img/fl_on.png'),
                name: '分类'
            },
            {
                path: '/youhui',
                icon: require('../assets/img/yhj_off.png'),
                selIcon: require('../assets/img/yhj_on.png'),
                name: '优惠卷'
            },
            {
                path: '/cart',
                icon: require('../assets/img/gwc_off.png'),
                selIcon: require('../assets/img/ghc_on.png'),
                name: '购物车'
            }, {
                path: '/my',
                icon: require('../assets/img/my_off.png'),
                selIcon: require('../assets/img/my_on.png'),
                name: '我的'
            }
            ]
        }
    },
    methods:{
        changeTab(item,index){
            this.acIndex=index;
            this.$router.push(item.path)
        }
    },
};
</script>

<style lang="scss" scoped>
.tabbar_wrap {
    width: 100%;
    height: 90px;
    background: #ccc;
    display: flex;
    justify-content: space-around;
    position: fixed;
    bottom: 0;
    left: 0;

    .tabbar_one {
        width: 23%;
        height: 100px;
        text-align: center;
        font-size: 20px;

        &.active {
            color: red;
        }

        img {
            width: 60px;
            height: 60px;
        }
    }
}
</style>